<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品类目统计</title>
    <!--引入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="app">
    <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="fetchData()">
    </el-date-picker>
    <div id="pie" style="width: 1000px;height:500px;"></div>
    <el-table
            :data="reportData"
            border
            style="width: 100%">
        <el-table-column
                prop="categoryName"
                label="分类名称"
                width="200">
        </el-table-column>
        <el-table-column
                prop="num"
                label="数量"
                width="200">
        </el-table-column>
        <el-table-column
                label="数量比例"
                width="200">
            <template slot-scope="scope">
                {{(scope.row.num/totalNum*100).toFixed(0)}}%
            </template>
        </el-table-column>
        <el-table-column
                width="200"
                label="销售额">
            <template slot-scope="scope">
                ¥{{(scope.row.money/100).toFixed(2)}} 元
            </template>
        </el-table-column>
        <el-table-column
                width="200"
                label="销售额比例">
            <template slot-scope="scope">
                {{(scope.row.money/totalMoney*100).toFixed(0)}}%
            </template>
        </el-table-column>
    </el-table>
</div>
</body>
<script src="../js/util.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/elementui.js"></script>
<script src="../js/echarts.common.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                reportData:[],
                dateRange:[],
                totalNum:0,
                totalMoney:0
            }
        },
        methods:{
            fetchData(){
                let beginDate=this.dateRange[0].Format('yyyy-MM-dd');
                let endDate=this.dateRange[1].Format('yyyy-MM-dd');
                axios.get(`/categoryReport/category1Count.do?beginDate=${beginDate}&endDate=${endDate}`).then(response=>{
                    this.reportData=response.data;
                    //计算总销售数和总销售额
                    //每次计算前先清零
                    this.totalNum=0;
                    this.totalMoney=0;
                    for (var i = 0; i < this.reportData.length; i++) {
                        this.totalNum+=this.reportData[i].num;
                        this.totalMoney+=this.reportData[i].money;
                    }

                    //echarts pie 饼图
                    //饼图
                    let legendData=[]; //图例名称
                    let numData=[]; //销售量数据
                    let moneyData=[]; //销售额数据
                    for (let i = 0; i < this.reportData.length; i++) {
                        legendData.push(this.reportData[i].categoryName);
                        numData.push({value:this.reportData[i].num,name:this.reportData[i].categoryName});
                        moneyData.push({value:(this.reportData[i].money/100).toFixed(2),name:this.reportData[i].categoryName})
                    }

                    let pieCharts=echarts.init(document.getElementById('pie'));
                    let pieOption={
                        title: {
                            text: '商品类目销售分析',
                            subtext: '销售量和销售额',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            type: 'scroll',
                            orient: 'horizontal',
                            //right: 10,
                            //top: 20,
                            bottom: 20,
                            data: legendData

                            //selected: data.selected
                        },
                        series: [
                            {
                                name: '销售量',
                                type: 'pie',
                                radius: '55%',
                                center: ['30%', '50%'],
                                /*data: [
                                    {value: 1048, name: '搜索引擎'},
                                    {value: 735, name: '直接访问'},
                                    {value: 580, name: '邮件营销'},
                                    {value: 484, name: '联盟广告'},
                                    {value: 300, name: '视频广告'}
                                ],*/
                                data:numData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            },
                            {
                                name: '销售额',
                                type: 'pie',
                                radius: '35%',
                                center: ['70%', '50%'],
                                /*data: [
                                    {value: 2048, name: '搜索引擎'},
                                    {value: 735, name: '直接访问'},
                                    {value: 880, name: '邮件营销'},
                                    {value: 284, name: '联盟广告'},
                                    {value: 1300, name: '视频广告'}
                                ],*/
                                data:moneyData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    pieCharts.setOption(pieOption);
                })
            }
        }
    });
</script>
</html>